<template>
    <view class="w-[350px] m-auto mb-2 text-[9px] color-[#999] flex flex-col gap-1 mt-2">
        <view class="flex align-center items-center">
            <text class="block font-bold text-[24rpx]">增加商品：</text>
            <view class="flex items-center">
                <nut-radio-group v-model="tempShopStore.hasGoods" direction="horizontal">
                    <nut-radio :label="false" size="small" class="text-[24rpx]">否</nut-radio>
                    <nut-radio :label="true" size="small" class="text-[24rpx]">是</nut-radio>
                </nut-radio-group>
            </view>
            <nut-button type="success" size="mini" @click="popGoods" v-if="tempShopStore.hasGoods">增加商品</nut-button>
            <text class="ml-auto text-[24rpx]">小计：<text class="text-red-500">¥{{ tempShopStore.getTotalPrice }}</text></text>
        </view>
        <view class="w-full bg-[#f0f0f0] p-[3px]">
            <view class="flex justify-between">
                <view class="table-cell">分类</view>
                <view class="table-cell">名称</view>
                <view class="table-cell">型号</view>
                <view class="table-cell">规格</view>
                <view class="table-cell">材质</view>
                <view class="table-cell">单价</view>
                <view class="table-cell">数量</view>
                <view class="table-cell">小计</view>
            </view>
            <view class="flex justify-between" v-for="(item, index) in tempShopStore.goodsList" :key="index">
                <view class="table-cell">{{ item.goodsType_dictText}}</view>
                <view class="table-cell">{{ item.typeName }}</view>
                <view class="table-cell">{{ item.model }}</view>
                <view class="table-cell">{{ item.unit }}</view>
                <view class="table-cell">{{ item.material }}</view>
                <view class="table-cell">{{ item.price }}</view>
                <view class="table-cell">
                    <nut-input-number v-model="tempShopStore.numMap[item.id]" :min="0" :max="1000" />
                </view>
                <view class="table-cell">{{ tempShopStore.getSubtotal(item) }}</view>
            </view>
        </view>

        <nut-popup v-model:visible="tempShopStore.showAdd" position="bottom" :style="{ width: '100%', height: '80%' }">
            <goods ref="goodsRef" class="w-full h-full" />
        </nut-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { InputNumber } from '@nutui/nutui-taro'
import { useGoodsStore, useTempShopStore } from '@/store';
import goods from '@/pages/shop/list.vue';

const goodsStore = useGoodsStore(); 
const tempShopStore = useTempShopStore();
const times = ref(1);
const isAdd = ref('0');
const tableData = ref([
    {
        category: '西药',
        name: '氯化钠注射液',
        model: '0.9%',
        specification: '500ml',
        material: '塑料品',
        unitPrice: 5.0,
        quantity: 3,
        subtotal: 15.0
    }
]);

const props = defineProps({
  preCharge: {
    type: Number,
    required: true
  }
})

const popGoods = () => {
    tempShopStore.openAddDialog();
}
const serviceRequirement = ref('无');
const serviceTimes = ref(1);
// const preCharge = ref(0);

const decreaseServiceTimes = () => {
    if (serviceTimes.value > 1) {
        serviceTimes.value--;
    }
};

const increaseServiceTimes = () => {
    serviceTimes.value++;
};

// 初始化 numMap
onMounted(() => {
  tempShopStore.initData();
});

defineExpose({
  getPrice() {
    return props.preCharge;
  },
  getTimes(){
    return times.value;
  }
})
</script>

<style scoped>
.container {
    padding: 12rpx;
    background: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

/*
.{
    border: 1rpx solid #ccc;
    border-radius: 10rpx;
    overflow: hidden;
    margin: 10rpx;
}*/

.table-header,
.table-row {
    display: flex;
    min-height: 80rpx;
    align-items: center;
    justify-content: space-between;
}

.table-cell {
    flex: 1;
    padding: 10rpx;
    border-bottom: 1rpx solid #ccc;
    border-right: 1rpx solid #ccc;
    text-align: center;
}

.table-header {
    background-color: #f5f5f5;
    font-weight: bold;
}

.table-row:last-child.table-cell {
    border-bottom: none;
}

.table-row:last-of-type.table-cell:last-child {
    border-right: none;
}

.service-info {
    margin-top: 20rpx;
}

.service-requirement {
    margin-bottom: 10rpx;
}

.service-times {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.counter {
    display: flex;
    margin-left: 10rpx;
}

.counter-button {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #ccc;
    background-color: #f5f5f5;
}

.pre-charge {
    font-weight: bold;
}
</style>